<template>
  <!-- 便签新增/编辑区 -->
  <div>
    <div class="cover-layer"></div>
    <div id="new-markdown" class="editor-layer">
      <div class="editor-top">
        <input class="editor-title form-control"
               type="text" placeholder="标题" v-model="memo.title"/>
        <div class="dropdown select-category">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="category">{{$store.state.aHelper.getCateName(memo.categoryId)}}</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li @click="memo.categoryId = 0"><a>工作</a></li>
            <li @click="memo.categoryId = 2"><a>生活</a></li>
            <li @click="memo.categoryId = 1"><a>学习</a></li>
          </ul>
        </div>
        <ul class="tools">
          <li class="save" @click="save"></li>
          <li class="cancel" @click="closeEdit"></li>
        </ul>
      </div>
      <textarea class="text-content form-control" placeholder="内容"  v-model="memo.content"></textarea>
    </div>
  </div>
</template>
<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  import ItemData from "@/model/ItemData";
  @Component
  export default class MemoEditor extends Vue{
    // 如果memo为空值的话会报错
    memo: ItemData = new ItemData(-1,0);
    save() {
      // memo 校验
      if(!this.memo|| this.memo.title.trim().length<1 || this.memo.content.trim().length<1 || this.memo.categoryId<0) return alert("对不起，输入错误~~！");
      if(this.memo.id <= -1) {
        // 保存操作
        this.$store.state.aHelper.add(this.memo)
      } else {
        // 编辑操作
        this.$store.state.aHelper.editData(this.memo)
      }
      this.$store.state.isShow = false
    }
    closeEdit() {
      this.$store.state.isShow = false
      this.$store.state.transfMemo = null
    }
    created(): void {
      this.memo = this.$store.state.transfMemo || new ItemData(-1,0);
    }
  }
</script>